import React, { Component } from 'react';
import {Card, Button, Table, Form, Select, DatePicker,Modal, message} from 'antd';
import axios from './../../axios';
import utils from './../../utils/utils';
import BaseForm from '../../components/BaseForm';
const FormItem = Form.Item;
const Option = Select.Option;
class Order extends Component {
    state = {
        list: [],
        isShowFinish: false,
        orderInfo: {}
    };
    params = {
        page: 1
    };
    formList = [
        {
            type: 'SELECT',
            label: '城市',
            field: 'city',
            placeholder: '全部',
            initialValue: '1',
            width: 80,
            list: [{id: '0', name: '全部'},{id: '1', name: '北京'},{id: '2', name: '上海'},]
        },
        {
            type: '时间查询'
        },
        {
            type: 'SElECT',
            label: '订单状态',
            field: 'order_status',
            placeholder: '全部',
            initialValue: '1',
            width: 80,
            list: [{id: '0', name: '全部'}, {id: '1', name: '进行中'}, {id: '2', name: '结束行程'}]
        }
    ];
    componentDidMount() {
        this.requestList()
    }
    // 查询
    handFilter = (params) => {
        // 接收子级传来的事件
        console.log(params)
        this.params = params;
        this.requestList();
    }
    // 默认请求我们的接口数据
    requestList = () => {
        let _this = this;
        axios.Ajax({
            url: '/order/list',
            method: 'GET',
            data: {
                params: {
                    page: this.params.page,
                    isShowLoading: true
                }
            }
        }).then((res)=>{
            res.result.list.map((item, index)=>{
                item.key = index;
                return item;
            })
            this.setState({
                list: res.result.list,
                pagination: utils.pagination(res, (current) => {
                    _this.params.page = current;
                    _this.requestList();
                })
            })
        })
    }
    // 结束订单
    handleFinish = () => {
        let item = this.state.selectedRows
        if (!item) {
            Modal.info({
                title: '信息',
                content:"请选择一条订单结束"
            });
            return;
        }
        axios.Ajax({
            url: '/order/ebike_info',
            method: 'GET',
            data: {
                params: {
                    order_id: item.id
                }
            }
        }).then((res)=> {
            console.log(res);
            this.setState({
                isShowFinish: true,
                orderInfo: res.result
            })
        })
    }
    // 结束订单提交
    handleSubmit = () => {
        axios.Ajax({
            url: '/order/finish',
            method: 'GET',

        }).then((res) => {
            message.success(res.msg)
            this.setState({
                isShowFinish: false
            })
        })
       
    }
    // 订单详情
    handleOrderDetail = () => {
        let item = this.state.selectedRows
        if (!item) {
            Modal.info({
                title: '信息',
                content:"请选择一条订单结束"
            });
            return;
        }
        console.log(this.props)
        // this.props.history.push(`/common/order/detail/${item[0].id}`)
        window.open(`/#/common/order/detail/${item[0].id}`,'_blank')
    }
    render() {
        const columns = [
            {
                title: '订单编号',
                dataIndex: 'order_id',
                align: 'center'
            },
            {
                title: '车辆编号',
                dataIndex: 'bicycle_id',
                align: 'center'
            },
            {
                title: '用户名',
                dataIndex: 'username',
                align: 'center'
            },
            {
                title: '手机号码',
                dataIndex: 'phone',
                align: 'center'
            },
            {
                title: '里程',
                dataIndex: 'mile',
                align: 'center',
                render: (mile) => {
                    return mile/1000 + 'Km'
                }
            },
            {
                title: '行程时长',
                dataIndex: 'distance_time',
                align: 'center',
                render: () => {

                }
            },
            {
                title: '状态',
                dataIndex: 'status',
                align: 'center',
                render: (status) => {
                    return status === 1 ? '进行中' : (status === 2 ? '进行中(临时封锁)':'封锁行程')
                }
            },
            {
                title: '开始时间',
                dataIndex: 'start_time',
                align: 'center'
            },
            {
                title: '结束时间',
                dataIndex: 'end_time',
                align: 'center'
            },
            {
                title: '订单金额',
                dataIndex: 'order_amount',
                align: 'center'
            },
            {
                title: '实付金额',
                dataIndex: 'pay_amount',
                align: 'center'
            }
        ]
        const formItemLayout = {
            labelCol: {span: 5},
            wrapperCol:{span: 12}
        };
        const {selectedRowKeys} = this.state
        const rowSelection = {
            type: 'radio',   // 单选
            selectedRowKeys,  // 当前选中的key值
            onChange: (selectedRowKeys, selectedRows)=> {
                this.setState({
                    selectedRowKeys,
                    selectedRows
                })
            }
        }
        return (
            <div>
                <Card>
                    <FilterFormCreate/>
                    {/* <BaseForm formList={this.formList} filterSubmit={this.handFilter}/> */}
                </Card>
                <Card>
                    <Button type="primary" onClick={this.handleOrderDetail}>订单详情</Button>
                    <Button type="primary" onClick={this.handleFinish}>结束订单</Button>
                </Card>
                <div className="content-wrapper">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.list}
                        pagination={this.state.pagination}
                        rowSelection = {rowSelection}
                    />
                </div>
                {/* 不可编辑的表单展示 */}
                <Modal 
                    title="结束订单"
                    cancelText="取消"
                    okText="确认"
                    visible={this.state.isShowFinish}
                    onCancel={() => {
                        this.setState({
                            isShowFinish: false
                        })
                    }}
                    onOk={this.handleSubmit}
                    width={600}>
                    <Form layout="horizontal" >
                        <FormItem label="订单编号" {...formItemLayout}>
                            {this.state.orderInfo.order_id}
                        </FormItem>
                        <FormItem label="剩余电量" {...formItemLayout}>
                            {this.state.orderInfo.battery + '%'}
                        </FormItem>
                        <FormItem label="行程开始时间" {...formItemLayout}>
                            {this.state.orderInfo.start_time}
                        </FormItem>
                        <FormItem label="行程开始时间" {...formItemLayout}>
                            {this.state.orderInfo.location}
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}
class FilterForm extends Component {
    render () {
        const {getFieldDecorator}  = this.props.form;
        return (
            <Form layout="inline">
                <FormItem label="城市">
                    {
                        getFieldDecorator('city_id')(
                            <Select placeholder="全部" style={{width: 100}}>
                                <Option value="">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                                <Option value="3">上海市</Option>
                                <Option value="4">深圳市</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="订单时间">
                    {
                        getFieldDecorator('start_time')(
                            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                        )
                    }
                </FormItem>
                <FormItem>
                    {
                        getFieldDecorator('end_time')(
                            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                        )
                    }
                </FormItem>
                <FormItem label="订单状态">
                    {
                        getFieldDecorator('order_status')(
                            <Select placeholder="全部" style={{width: 100}}>
                                <Option value="">全部</Option>
                                <Option value="1">进行中</Option>
                                <Option value="2">进行中(临时封锁)</Option>
                                <Option value="3">行程结束</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button type="primary" style={{margin: '0 20px'}}>查询</Button>
                    <Button>重置</Button>
                </FormItem>
            </Form>
        )
    }
}
const FilterFormCreate = Form.create({})(FilterForm);

export default Order;